<template>
    <div class="container">
        <div class="address" @click="$router.push('/my/address')">
            {{ defaultAddress }}
        </div>
        <div class="carts">
            <van-card v-for="cart in carts" :key="cart.id">
                <template #thumb>
                    <van-checkbox v-model="cart.checked">复选框</van-checkbox>
                    <img :src="cart.banner" alt="">
                </template>
                <template #title>
                    <b>{{ cart.supplier }}</b>
                </template>
                <template #desc>
                    <p>{{ cart.name }}</p>
                </template>
                <template #bottom>
                    <div>
                        <p class="price">￥{{ cart.price }}元</p>
                        <p class="subtotal">小计：{{ cart.price * cart.number | tofixed(2) }}</p>
                    </div>
                    <div>
                        <van-button icon="minus" type="info" plain round hairline size="mini"
                            @click="reduce(cart.id)"></van-button>
                        <span>{{ cart.number }}</span>
                        <van-button icon="plus" type="danger" hairline round size="mini" @click="add(cart.id)"></van-button>
                    </div>
                </template>
            </van-card>
        </div>
        <!-- <div class="jiesuan"> -->
        <van-submit-bar :price="3050" button-text="提交订单">
            <van-checkbox>全选</van-checkbox>
            <template #tip>
                你的收货地址不支持同城送, <span>修改地址</span>
            </template>
        </van-submit-bar>
        <!-- </div> -->
    </div>
</template>

<script>
import Vue from 'vue';
import { Card } from 'vant';
import { getCarts, getDefaultAddress } from '@/request/request.js'
import { Checkbox } from 'vant';
import { SubmitBar } from 'vant';
import { getCookie } from '@/utils/cookie.js'

Vue.use(SubmitBar);
Vue.use(Checkbox);
Vue.use(Card);
export default {
    created() {
        //判断用户是否登录
        if (!getCookie('username')) {
            this.$router.push({
                path: '/login',
                query: {
                    url: this.$route.path
                }
            });
            return;
        }
        getCarts().then(data => {
            this.carts = data
            this.carts.forEach(item => item.checked = true)
        })
        //默认地址
        getDefaultAddress().then(data => {
            this.defaultAddress = data
        })
    },
    data() {
        return {
            carts: [],
            defaultAddress: ''
        }
    },
    filters: {
        tofixed(data, n) {
            return data.toFixed(n)
        }
    },
    methods: {
        add(id) {
            let cart = this.carts.find(item => item.id == id)
            cart.number++
        },
        reduce(id) {
            let cart = this.carts.find(item => item.id == id)
            cart.number--
            if (cart.number <= 1) {
                cart.number = 1
            }
        }
    }
}
</script>

<style lang="scss" scoped>
// .jiesuan:after {
//     clear: both;
//     display: block;
//     content: '';
// }

.container {
    padding-bottom: 50px;
}

p {
    padding: 0;
    margin: 0;
}

.price {
    color: #f00;
}

.van-button--mini {
    height: 20px;
}

span {
    margin: 0 10px;
    vertical-align: sub;
}

.van-card__bottom {
    display: flex;
    justify-content: space-between;
}

.address {
    text-align: center;
    line-height: 50px;
}

.carts {
    img {
        width: 80px;
        height: 100px;
    }
}

.van-card__thumb {
    display: flex;
    justify-content: space-between;
    width: 100px;
}

.van-submit-bar {
    position: fixed;
    bottom: 50px;
}
</style>
